<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@page import="portal.entidades.Articulo"%>
<%@page import="java.util.List"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Carrito 2014</title>
        <link href="../media/dataTables/demo_page.css" rel="stylesheet" type="text/css" />
        <link href="../media/dataTables/demo_table.css" rel="stylesheet" type="text/css" />
        <link href="../media/dataTables/demo_table_jui.css" rel="stylesheet" type="text/css" />
        <link href="../media/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" media="all" />
        <link href="../media/themes/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" media="all" />
        <script src="../scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
        <script src="../scripts/jquery.dataTables.min.js" type="text/javascript"></script>
        <script src="../scripts/configuration.jquery.dataTables.editable.js" type="text/javascript"></script>
        <script src="../scripts/jquery.jeditable.js" type="text/javascript"></script>
        <script src="../scripts/jquery.validate.js" type="text/javascript"></script>
        <script src="../scripts/jquery-ui.js" type="text/javascript"></script>

<script type="text/javascript">
	$(document).ready(function() {
		//alert("Llegue");
		 $("#tableBetSellers").dataTable({
             "bServerSide": true,
             "scrollY": "200px",
             "scrollCollapse": true,
             "aLengthMenu": [5, 10, 25, 50],
             "sAjaxSource": "../Articulos/BetSellers",
             "bProcessing": true,
             "sPaginationType": "full_numbers",
             "bJQueryUI": true,
             "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
				 //alert(aData[4]);
	             var imgTag = '<img src="../images/productos/'+aData[4]+'.jpg" alt="'+aData[4]+'.jpg" width="60px" height="60px" align="middle" />';
	             $('td:eq(4)', nRow).html(imgTag);
	             return nRow;
         		},
             "aoColumns": [
                   { "sName": "Rank",  "bSortable": false },
                   { "sName": "Nombre", "bSortable": false },
                   { "sName": "Marca",  "bSortable": false },
                   { "sName": "Precio", "bSortable": false },
                   { "mData": "Imagen", "bSortable": false, "sWidth": '80px', "text-align": "center", "sClass": "center" }
                    
                  ],
              "order": [[0, 'asc']]
         });
	});
</script>

</head>
<body>
	<div align="right"><b style="vertical-align: bottom; padding-right: 0"><img alt="test" src="../images/carrito_masvendidos.png"></div>
		<br>
		<table id="tableBetSellers" width="500px" class="display">
			<thead>
				<th>Rank</th>
				<th>Nombre</th>
				<th>Marca</th>
				<th>Precio</th>
				<th>Imagen</th>
			</thead>
			<tbody>
			</tbody>
		</table>
</body>
</html>